<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <style>
        #div1{
            border: 1px solid red;
            height: 100px;
            width: 100px;
        }

        #div2{
            border: 1px solid blue;
            height: 100px;
            width: 100px;
        }

        #div3{
            border: 1px solid yellow;
            height: 100px;
            width: 100px;
        }
        .bg{
            background: red;
            height: 100px;
            width: 100px;
            border-radius: 50px;
        }

        .bg2{
            background: pink;
            height: 100px;
            width: 100px;
            border-radius: 50px;
        }
    </style>
    <script>
        function onmover() {
            var div3 = document.getElementById("div3");
            div3.className="bg";
        }

        function moout() {
            var div3 = document.getElementById("div3");
            div3.className="bg2";
        }

        window.onmouseover = function () {
            var x = window.event.clientX;
            var y = window.event.clientY;
            document.getElementById("x").value = x;
            document.getElementById("y").value = y;
        }

        window.onkeydown = function () {
        console.log(event.keyCode);
        }
    </script>
</head>
<body>
    <div id="div1" onclick="alert('单击事件')">单击事件</div>
    <hr/>
    <div id="div2" ondblclick="alert('双击事件')">双击事件</div>
    <hr/>
    <div id="div3" class="bg2" onmouseover="onmover()" onmouseout="moout()">鼠标移入</div>
    <hr/>
    x坐标:<input type="text" id="x"><br>
    y坐标:<input type="text" id="y"><br>
</body>
</html>